<template>
  <div>
    御剑乘风来,除魔天地间!===app
    <ul>
      <!-- <li><router-link to="/" exact>tab1</router-link></li> -->
      <!-- <li><router-link to="/?id=1&name=郑潇" >tab1</router-link></li> -->
      <li>
        <router-link :to="{ path: '/', query: { id: 1, name: '郑潇' } }"
          >tab1</router-link
        >
      </li>
      <!-- <li><router-link :to="/second?age=20">tab2</router-link></li> -->
      <li>
        <router-link :to="{ path: '/second', query: { age: 20 } }"
          >tab2</router-link
        >
      </li>
      <!-- 混合传参:先路径/传参,后?传参 -->
      <!-- <li><router-link to="/third/3/rose/read?gender=女&num=111">tab3</router-link></li> -->
      <li>
        <router-link
          :to="{
            name: 'Third',
            params: { ids: 3, name: 'rose', hobby: 'read' },
            query: { gender: '女' },
          }"
          >tab3</router-link
        >
      </li>
    </ul>
    <hr />
    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  justify-content: space-around;
}
.router-link-exact-active {
  background-color: red;
}
// .aa {background-color:pink;}
</style>
